$red: #fe6c6c;
$blue: #3abbf8;
$yellow: #ffff00;
$white: #ffffff;
$green: #5ecadd;
$default: #444444;
$grey: #999999;
$black: #000000;
$colors: (red: $red, blue: $blue, green: $green, yellow: $yellow, white: $white, default: $default, grey: $grey, black: $black);
// font-color
@mixin setFontColor {
  @each $key, $value in $colors {
    .font-#{$key} {
      color: $value !important;
    }
  }
}

// backgroundImage
@mixin setBackgroundImage($url) {
  background-image: url($url);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
}

$baseFontsize: 100px;
// set parse 'px' to 'rem'
@function px2rem($pixel) {
  @if (unitless($pixel)) {
    $pixel: $pixel*1px;
  }
  @return $pixel/$baseFontsize *1rem;
}
